<template>
  <!--  检查井-->
  <div class="box-view">
    <el-row :gutter="15">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <div class="page">
          <div style="padding: 20px 0px 0px 20px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item @click.native="breadClick(item.deptTreeIdList)" v-for="item in deptTree.breadList"
                                  :key="item.name">
                <el-button type="text" class="bread_button_text">{{item.deptName}}</el-button>
              </el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <el-divider></el-divider>
          <div class="s-table">
            <!-- 条件筛选 -->
            <div class="page_filter">
              <el-input v-model="form.queryString" style="width: 300px" clearable placeholder="名称...">
                <template slot="prepend">查询条件</template>
              </el-input>

                <el-select v-model="form.pipeType" clearable placeholder="选择管线类型"
                           @change="changePipeInfo3()">
                  <el-option
                    v-for="item in EnumPipeTypeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
                <el-select v-model="form.pipeInfoId" clearable placeholder="选择管线">
                  <el-option
                    v-for="item in pipeInfoList3"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索
              </el-button>
            </div>
            <div class="page_main">
              <el-button icon="el-icon-plus" @click.stop="handleAdd" class="common_btn-small">检查井新增</el-button>
              <el-button icon="el-icon-plus" @click.stop="handleImport" class="common_btn-small">批量导入</el-button>
              <!-- table -->
              <div class="common_btnBox">
                <i class="iconfont iconzongshu icon-size"></i>
                总数：{{form.total}}
              </div>
              <el-table
                :data="tableList"
                border>
                <el-table-column prop="name" min-width="120" label="名称"></el-table-column>
                <el-table-column prop="roadName" min-width="120" show-overflow-tooltip label="道路名称"></el-table-column>
                <el-table-column prop="deptTreeName" min-width="140" label="管理单位"
                                 show-overflow-tooltip></el-table-column>

                <el-table-column prop="pipeInfoName" width="120" label="管线名称">
                </el-table-column>
                <el-table-column prop="pipeTypeName" width="120" label="管线类型">
                  <template slot-scope="scope">
                    <el-tag :style="scope.row.pipeType| pipeTypeColor" style="color: white" size="medium">
                      {{scope.row.pipeTypeName}}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="xLocation" min-width="150" label="x,y平面坐标">
                  <template slot-scope="scope">
                    {{scope.row.xLocation}},{{scope.row.yLocation}}
                  </template>
                </el-table-column>
                <el-table-column prop="coverUseTypeName" width="120" show-overflow-tooltip
                                 label="井盖材质"></el-table-column>

                <el-table-column prop="coverSize" width="100" show-overflow-tooltip
                                 label="井盖尺寸"></el-table-column>
                <el-table-column prop="createTime" width="140" show-overflow-tooltip label="创建年月">
                  <template slot-scope="scope">
                    {{scope.row.createTime|formatTimer}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="190" fixed="right">
                  <template slot-scope="scope">
                    <button type="text" class="btn_edit" @click="handleEdit(scope.row,isLook=false)">编辑</button>

                    <button type="text" class="btn_add" @click="handleEdit(scope.row,isLook=true)">查看</button>
                    <el-popconfirm v-if="hasPermission('pipe:manhole:del')" confirmButtonText='好的'
                                   cancelButtonText='不用了' icon="" title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
                      <button slot="reference" class="btn_delete">删除</button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页器 -->
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                             :current-page="form.page"
                             :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
              layout="sizes, prev, pager, next"  :total="form.total">
              </el-pagination>
            </div>
            <!-- 批量导入 -->
            <el-dialog title="批量导入检查井" :visible.sync="showImport" :close-on-click-modal="false" width="520px">
              <el-form ref="newUploadForm" :model="newUploadForm" :rules="rule2" label-width="80px"
                       label-position="right">
                <el-form-item label="管理单位" prop="deptTreeId">
                  <organization v-model="newUploadForm.deptTreeId" :disabled="isLook"
                                :changeOnSelect='true'
                                placeholder="选择管理单位"
                  ></organization>
                </el-form-item>
                <el-form-item label="管线类型" prop="pipeType">
                  <el-select v-model="newUploadForm.pipeType" clearable placeholder="选择管线类型"
                             @change="changePipeInfo2()">
                    <el-option
                      v-for="item in EnumPipeTypeList"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="管线选择" prop="pipeInfoId">
                  <el-select v-model="newUploadForm.pipeInfoId" clearable placeholder="选择管线">
                    <el-option
                      v-for="item in pipeInfoList2"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-row>
                  <el-col :span="18">
                    <el-form-item label="上传文件" prop="fileName">
                      <el-input v-model="fileName" :readonly='true' placeholder="文件名" style="width:250px;"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-upload class="upload-demo" ref="upload" action="doUpload" :limit="1" :file-list="fileList"
                               :before-upload="beforeUpload">
                      <el-button slot="trigger" type="primary" plain style="color:white;background:#1990FE">选择导入文件
                      </el-button>
                    </el-upload>
                  </el-col>
                </el-row>
                <el-row>
                  <el-button icon="el-icon-download" @click.stop="handleOutFile" size="mini" type="primary"
                             style="background:#1990FE ">导入模板下载
                  </el-button>
                </el-row>
              </el-form>
              <!-- 操作按钮 -->
              <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="cancleSub()">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateFormFile">确定</el-button>
      </span>
            </el-dialog>
            <!-- 新增编辑弹窗 -->
            <el-dialog :title="dialogTitle" :visible.sync="isShowDrawer" :close-on-click-modal="false" width="800px">
              <!-- 具体form表单 -->
              <div class="drawerContent" id="baseForm">
                <el-form label-position="right" ref="form" :rules="rule" :model="currentRow" label-width="120px"
                         label-suffix="：">
                  <el-form-item prop="name" label="管线点号">
                    <el-input v-model="currentRow.name" :disabled="isLook">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="管理单位" prop="deptTreeId">
                    <organization v-model="currentRow.deptTreeId" :disabled="isLook" :changeOnSelect='true'
                                  placeholder="选择管理单位"
                    ></organization>
                  </el-form-item>
                  <el-form-item label="管线类型" prop="pipeType">
                    <el-select :disabled="isLook" v-model="currentRow.pipeType" clearable placeholder="选择管线类型"
                               @change="changePipeInfo()">
                      <el-option
                        v-for="item in EnumPipeTypeList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="管线选择" prop="pipeInfoId">
                    <el-select :disabled="isLook" v-model="currentRow.pipeInfoId" clearable placeholder="选择管线">
                      <el-option
                        v-for="item in pipeInfoList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="xLocation" label="X平面坐标">
                    <el-input :disabled="isLook" v-model="currentRow.xLocation" type="number">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="yLocation" label="Y平面坐标">
                    <el-input :disabled="isLook" v-model="currentRow.yLocation" type="number">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="topHeight" label="高程">
                    <el-input :disabled="isLook" v-model="currentRow.topHeight" type="number">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="bottomHeight" label="埋深">
                    <el-input :disabled="isLook" v-model="currentRow.bottomHeight" type="number">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="mixLocation" label="混流位置">
                    <el-input :disabled="isLook" v-model="currentRow.mixLocation">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="teZheng" label="特征">
                    <el-select :disabled="isLook" v-model="currentRow.teZheng" style="width: 100%;" clearable
                               placeholder="请选择特征">
                      <el-option
                        v-for="item in EnumTeZhengList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="fuShuWu" label="附属物">
                    <el-select :disabled="isLook" v-model="currentRow.fuShuWu" style="width: 100%;" clearable
                               placeholder="请选择附属物">
                      <el-option
                        v-for="item in EnumFuShuWuList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="coverUseType" label="结构形式">
                    <el-select :disabled="isLook" v-model="currentRow.coverUseType" style="width: 100%;" clearable
                               placeholder="请选择结构形式">
                      <el-option
                        v-for="item in EnumCoverUseTypeList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code">
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="outSize" label="外轮廓尺寸">
                    <el-input :disabled="isLook" v-model="currentRow.outSize" type="number">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="inSize" label="内轮廓尺寸">
                    <el-input :disabled="isLook" v-model="currentRow.inSize" type="number">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="explanation" style="width: 100%" label="备注">
                    <el-input :disabled="isLook" v-model="currentRow.explanation" type="textarea" :rows="3">
                    </el-input>
                  </el-form-item>


                </el-form>

              </div>
              <!-- 操作按钮 -->
              <div  class="demo-drawer__footer" v-if="isLook==false">
                <el-button @click="isShowDrawer=false" type="info">取 消</el-button>
                <el-button type="primary" class="common_btn-defalut" @click="inspectionAddForm">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </el-col>
    </el-row>
    <x-loading v-show="isLoading"></x-loading>
  </div>

</template>
<script>
import Organization from '@/components/organization-unit/all'
import ItemMixins from "@/views/Pipeline/item.mixins";
import XLoading from '@/components/animation/x-loading.vue'
import {filterEmpty} from '@/services/request'
import {
  manholeAdd, manholeQueryList, manholeUpdate, querySelectList,
  importManholeData, manholeDelete
} from '@/services/model/pipeline'
import Format from '@/utils/format'
import OrganizationTree from '@/components/organization-tree/all'
import Permission from '@/utils/permission'
import Enums from '@/utils/enums'

export default {
  mixins: [ItemMixins,Enums],
  components: {
    Organization,
    XLoading,
    // EchartsNestingChange,
    OrganizationTree
  },
  data() {
    return {
      fileList: [],
      newUploadForm: {
        fileName: '',
        deptTreeId: '',
        pipeType: '',
        pipeInfoId: '',
      },
      fileName: '',
      files: null,
      isLoading: true,
      showImport: false,
      rule: {
        deptTreeId: {required: true, message: '请选择管理单位'},
        pipeType: {required: true, message: '请选择管线类型'},
        pipeInfoId: {required: true, message: '请选择管线'},
        name: {required: true, message: '请输入检查井名称'},
        xLocation: {required: true, message: '请输入X平面坐标'},
        yLocation: {required: true, message: '请输入Y平面坐标'},
        bottomHeight: {required: true, message: '请输入管底高程'},
        depth: {required: true, message: '请输入井盖材质'},
        mixLocation: {required: true, message: '请输入混流位置'},
        topHeight: {required: true, message: '请输入地面高程'},
      },
      rule2: {
        deptTreeId: {required: true, message: '请选择管理单位'},
        pipeType: {required: true, message: '请选择管线类型'},
        pipeInfoId: {required: true, message: '请选择管线'},
      },
      pipeInfoList: [],      pipeInfoList3: [],

      isLook: false, //查看状态
      isDisabled: false,//是否可选
      deptTree: {
        breadList: [],//面包屑
        deptTreeId: '',
      },
      EnumTeZhengList:[],
      EnumFuShuWuList:[],
      EnumPipeTypeList: [],
      EnumCoverUseTypeList: [],
      pipeInfoList2: [],
      form: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      tableList: [],
      isShowDrawer: false, // 是否显示弹窗
      currentRow: {
        pipeInfoId: ''
      }, // 新增数据
    }
  },
  computed: {
    // 弹窗的title
    dialogTitle() {
      return this.currentRow.id ? '编辑检查井' : '新增检查井'
    },
    userInfo() {
      return this.$store.state;
    },
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer), 'yyyy年MM月dd日')
    },
    //管道类型颜色

  },
  methods: {
    // 判断是否有删除权限
    hasPermission(permissionStr) {
      return Permission(this.$store.state.userInfo, permissionStr)
    },
    //删除
    async handleDelete(id) {
      let res = await manholeDelete({id: id})
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '删除成功'
        })
      }
      this.queryList()
    },
    // 确认导入文件
    validateFormFile() {
      this.$refs.newUploadForm.validate(valid => { // 是否通过 表单验证
        if (valid) {
          if (this.fileName === '') {
            this.$message({
              message: '请选择要上传的文件！',
              type: 'warning',
              showClose: true
            })
            return false
          }
          this.isLoading = true
          let fileFormData = new FormData()
          fileFormData.append('uploadFile', this.files, this.fileName) // 上传的文件
          importManholeData(this.newUploadForm.pipeInfoId, fileFormData).then(res => { // 上传请求
            if (res.code === 200) {
              this.fileName = ''
              this.showImport = false
              this.$notify({
                type: 'success',
                title: '提示',
                message: '导入成功'
              })
              this.queryList()
            }
          })
        }
        this.isLoading = false
      })
    },
    cancleSub() { // 取消上传
      this.showImport = false
      this.fileName = ''
      this.newUploadForm = {}
    },
    handleOutFile() { // 文件导出
      const {href} = this.$router.resolve({path: '/statics/检查井批量导入模板.xls'})
      window.open(href)
    },
    beforeUpload(file) { // 上传前 文件校验
      this.files = file
      this.fileName = file.name
      return false // 返回false不会自动上传
    },
    //验证添加表单
    inspectionAddForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.currentRow = filterEmpty(this.currentRow)
          this.submitData()
        }
      })
    },
    //批量导入
    handleImport() {
      this.newUploadForm = {}
      this.showImport = true
      this.$nextTick(() => {
        this.$refs.newUploadForm.clearValidate()
      })
    },
    //新增
    handleAdd() {
      this.currentRow = {}
      this.pipeInfoList = []
      this.isShowDrawer = true
      this.isLook = false
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 新增编辑提交数据
    async submitData() {
      // 根据ID判断使用新增还是编辑管理单位：
      let action = this.currentRow.id ? manholeUpdate : manholeAdd
      let res = await action(this.currentRow)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: this.currentRow.id ? '修改成功' : '添加成功'
        })
        this.isShowDrawer = false
        this.queryList()
      }
      return res
    },
    //编辑查看
    handleEdit(row, isLook) {
      this.isLook = isLook
      this.currentRow = JSON.parse(JSON.stringify(row))
      this.isShowDrawer = true
      this.changePipeInfo()
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    async changePipeInfo2() {
      let {data} = await querySelectList(this.newUploadForm)
      this.pipeInfoList2 = data
    },
    async changePipeInfo() {
      let {data} = await querySelectList(this.currentRow)
      this.pipeInfoList = data
      // this.currentRow.pipeInfoId = ''
    },
    async changePipeInfo3() {
      let {data} = await querySelectList(this.form)
      this.pipeInfoList3 = data
      // this.currentRow.pipeInfoId = ''
    },
    //面包屑跳转
    breadClick(deptTreeId) {
      this.$refs.deptTree.changeBread(deptTreeId)
    },
    //组织机构组件回调
    selectOrgHandel() {
      this.$forceUpdate()
      this.form.deptTreeId = this.deptTree.deptTreeId
      this.currentRow.deptTreeId = this.deptTree.deptTreeId
      this.form.page = 1
      this.queryList()

    },

    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },

    //列表数据
    async queryList() {
      this.isLoading = true
      let data = await manholeQueryList(this.form)
      this.tableList = data.data.records
      this.form.total = data.data.total
      this.isLoading = false

    }

  },
  mounted() {
    this.queryDictList(['EnumCoverUseType', 'EnumPipeType','EnumTeZheng','EnumFuShuWu'],
      ['EnumCoverUseTypeList', 'EnumPipeTypeList','EnumTeZhengList','EnumFuShuWuList' ])
  },
  activated() {

  }
}
</script>

<style lang="less" scoped>
  .drawerContent {
    width: 90%;
    margin: 5% auto;
    margin-bottom: 0;
    height: 580px;
    overflow-y: auto;
    overflow-x: hidden;

    /deep/ .el-form-item {
      width: 50%;
      display: inline-block;

      /deep/ .el-textarea__inner {
        border: 1px solid #1990FE;
      }
    }
  }

  .drawerContent_Water {
    width: 96%;
    margin: 5% auto;
    margin-bottom: 0;
    max-height: 760px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .drawerContent::-webkit-scrollbar {
    width: 0px;
    /*height: 4px;*/
  }

  /*设置按钮样式*/
  .demo-drawer_footer {
    width: 100%;
    height: 5% !important;
    text-align: right;
    box-sizing: border-box;
    padding-right: 10%;
  }

  /*  两列输入框*/

</style>
<style scoped lang="less">
  .select_card {
    height: 100px;
    line-height: 90px;
    font-size: 20px;
    margin-top: 10px;
    background-color: #1990FE;
    color: #000000;
    background: #29597f !important;
    font-size: 140%;
    font-weight: 600;
    color: white !important;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 2px #6d6d6d !important;
  }

  .select_card .zh_name_view {
    color: white !important;
  }

  .hover_card {
    height: 100px;
    line-height: 90px;
    font-size: 120%;
    margin-top: 10px;
    border: 1px solid #1990FE !important;
  }


  .zh_name_view {
    display: inline-block;
    margin-left: 15px;
    color: #1990FE !important;
  }

  /*鼠标悬浮效果*/
  .hover_card:hover {
    background: #29597f !important;
    font-size: 140%;
    cursor: pointer;

  }

  .hover_card:hover .zh_name_view {

    color: white !important;
    font-weight: 600;
  }

  /deep/ .el-card {
    box-shadow: 0px 0px 8px #757575;
    background: #ffffff;
    color: #1990FE !important;
    box-shadow: none;

    img {
      vertical-align: top;
      width: 20%;
      margin-top: 10%;
    }
  }

  /deep/ .el-textarea__inner {
  }

  .el-tree-node__content span {
    color: #1990FE !important;
  }


  .tableChild /deep/ .el-table__row .el-table_2_column_22 {
    background: white !important;

  }

  .operationAdd /deep/ .common_btn-small {
    background: #1990FE !important;
    color: white !important;
    border-radius: 0px;
  }

  /deep/ .el-input-group__append, /deep/ .el-input-group__prepend {
    padding: 0 6px;
    color: #1990FE;
    background: transparent;;
    border: 0px;
  }

  .bread_button_text {
    padding-right: 0px;
    font-size: 18px;
    font-weight: 600;
    color: #1990FE;
  }

  .page_filter /deep/ .el-input-group__prepend {
    background: #2196F3;
    color: white;
    padding: 0 20px;
    font-size: 100%;
    font-weight: 500;
  }

  /*修改分段样式*/
  .el-table {
    /deep/ .el-table {
      th {
        background-color: #0DC26B !important;
        padding: 5px !important;
      }
    }
  }

  /deep/ .el-table__expanded-cell {
    background: #dcdcdc !important;
  }

</style>
